<template>
  <div class="provide-parent">
    <h4 class="font-medium text-gray-800 mb-3">Provide/Inject 跨级通讯演示：</h4>

    <!-- 中间层组件 -->
    <div class="middle-layer">
      <h5 class="text-sm font-semibold text-gray-700 mb-2">中间层组件 (不需要接收 props)</h5>
      <div class="p-3 bg-gray-100 rounded border-2 border-dashed border-gray-300">
        <p class="text-xs text-gray-600 mb-3">
          这个中间层组件不需要接收或传递任何 props，<br />
          但它的子组件可以通过 inject 直接访问祖先组件的数据
        </p>

        <!-- 深层嵌套的子组件 -->
        <InjectGrandChild />
      </div>
    </div>

    <!-- Provide/Inject 说明 -->
    <div class="mt-4 p-3 bg-indigo-50 border border-indigo-200 rounded">
      <h5 class="text-sm font-medium text-indigo-800 mb-2">🔗 Provide/Inject 说明</h5>
      <ul class="text-xs text-indigo-700 space-y-1">
        <li>• provide() 在祖先组件中提供数据</li>
        <li>• inject() 在后代组件中注入数据</li>
        <li>• 跨越多层组件，无需逐层传递 props</li>
        <li>• 适用于深层嵌套的组件通讯</li>
        <li>• 支持响应式数据和函数</li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import InjectGrandChild from './InjectGrandChild.vue'
</script>

<style scoped lang="scss">
.provide-parent {
  @apply border border-gray-200 rounded-lg p-4 bg-gray-50;
}

.middle-layer {
  @apply mb-4;
}
</style>
